export default {
  data () {
    return {
      // 控制步骤条进行到第几步 1是第一个
      currentStep: 1,
      // 控制标签页选择哪个选项卡 '0'是第一个
      currentTab: '0',
      // 基本信息表单数据
      addGoodData: {
        goods_name: '',
        goods_cat: '',
        goods_price: '',
        goods_number: '',
        goods_weight: '',
        goods_introduce: '',
        pics: ''
      },
      // 联级选择器数据选择后存储的数据
      cascaderValue: [],
      // 联级选择器列表数据
      cascaderList: [
        {
          value: 'ziyuan',
          label: '资源',
          children: [
            {
              value: 'axure',
              label: 'Axure Components'
            },
            {
              value: 'sketch',
              label: 'Sketch Templates'
            },
            {
              value: 'jiaohu',
              label: '组件交互文档'
            }
          ]
        }
      ],
      // 联级选择器配置
      cascaderProps: {
        value: 'cat_id',
        label: 'cat_name'
      },
      // 单选框组选存储选中的数据
      currentRadio: 1,
      // 上传图片的url
      uploadImageUrl: '',
      // 控制预览图片
      uploadDialogVisible: false,
      // 上传图片请求头设置
      uploadDefault: {
        Authorization: localStorage.getItem('token')
      },
      // 服务器返回的上传图片的临时路径
      tmpUploadPicUrl: '',
      // 富文本编辑器的内容
      quillEditorContent: ''
    }
  },
  created () {
    this.loadCascaderList()
  },
  methods: {
    // 点击下一步按钮的处理函数
    next (step, tab) {
      this.currentStep = step
      this.currentTab = tab
    },
    // 标签页被点击时的处理函数
    tabclick (tab) {
      // console.log(tab)
      this.currentStep = +tab.index + 1
    },
    // 联级选择器发生改变时的处理函数
    cascaderChange (value) {
      console.log(value)
    },
    // 从服务器获取商品分类的列表用与联级选择器中
    async loadCascaderList () {
      let res = await this.$axios.get(`categories`, {
        params: 3
      })

      console.log(res)

      this.cascaderList = res.data.data
    },
    // 删除上传图片按钮点击处理函数
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // 预览上传图片按钮点击处理函数
    handlePictureCardPreview (file) {
      this.uploadImageUrl = file.url
      this.uploadDialogVisible = true
    },
    // 上传图片后的钩子函数
    uploadPicSuccess (response) {
      console.log(response)
      // 上传图片后服务器响应返回了 上传的图片在服务器的路径 以及 临时路径
      this.tmpUploadPicUrl = response.data.tmp_path
    },
    // 上传商品确定点击处理函数
    async confirmAddGood () {
      // 收集数据
      let data = {
        goods_name: this.addGoodData.goods_name,
        goods_cat: this.cascaderValue.join(','),
        goods_price: this.addGoodData.goods_price,
        goods_number: this.addGoodData.goods_number,
        goods_weight: this.addGoodData.goods_weight,
        goods_introduce: this.quillEditorContent,
        pics: [{ pic: this.tmpUploadPicUrl }]
      }

      let res = await this.$axios.post('goods', data)
      console.log(res)

      // 商品添加完成后
      // 跳转到商品列表
      this.$router.push('/goods')
      // 提示成功
      this.$message({
        message: '添加商品成功',
        type: 'success'
      })
    }
  }
}
